<template>
  <div class="mingxi">
    <div class="powertop">
      <router-link class="powertopli " to="/yongjintixian/yongjintixian" v-if="checkquanxian('V0301').length > 0">佣金提现</router-link>
      <router-link class="powertopli " to="/yongjintixian/tixianjilu" v-if="checkquanxian('V0302').length > 0">提现记录</router-link>
      <router-link class="powertopli powertopact" to="/yongjintixian/mingxi" v-if="checkquanxian('V0303').length > 0">佣金明细核对</router-link>
    </div>
    <div v-loading='loading' style="padding: 30px ;">
      <div class="kflexc" style="margin-bottom: 10px;">
        <div style=" margin-right: 20px;display: flex; background-color: #f7f8fa;font-size: 12px;color: #666666;align-items: center;border-radius: 10px;padding: 0 10px;margin-bottom: 10px;">
          供应商
          <el-select clearable v-model="all.parent_name" style="width: 250px;" filterable placeholder="选择上游供应商">
            <el-option :label="item.name" :value="item.shop_id"  v-for="item in gongyingshanglists" :key="item.shop_id" ></el-option>
          </el-select>
        </div>
        <div style=" margin-right: 20px;display: flex; background-color: #f7f8fa;font-size: 12px;color: #666666;align-items: center;border-radius: 10px;padding: 0 10px;margin-bottom: 10px;">
          商品名称&编码

          <el-select style="width: 250px;" clearable v-model="all.source_skus"  filterable multiple collapse-tags placeholder="选择商品名称">
                    <el-option :label="item.title + '---' + item.fetch_code" :value="item.fetch_code" v-for="item in shoplists" :key="item.id" ></el-option>
                  </el-select>
        </div>
        <div style=" margin-right: 20px;display: flex; background-color: #f7f8fa;font-size: 12px;color: #666666;align-items: center;border-radius: 10px;padding: 0 10px;margin-bottom: 10px;">
          满足佣金结算
          <el-select clearable v-model="all.is_ok" style="width: 250px;" filterable placeholder="选择满足佣金结算">
            <el-option label="是" value="1" ></el-option>
            <el-option label="否" value="0" ></el-option>
          </el-select>
        </div>

        <div style=" margin-right: 20px;display: flex; background-color: #f7f8fa;font-size: 12px;color: #666666;align-items: center;border-radius: 10px;padding: 0 10px;margin-bottom: 10px;">
          是否结算
          <el-select clearable v-model="all.is_settlement" style="width: 250px;" filterable placeholder="选择是否结算">
            <el-option label="是" value="1" ></el-option>
            <el-option label="否" value="0" ></el-option>
          </el-select>
        </div>

        <div style=" margin-right: 20px;display: flex; background-color: #f7f8fa;font-size: 12px;color: #666666;align-items: center;border-radius: 10px;padding: 0 10px;margin-bottom: 10px;">
          订单ID
          <el-input style="width: 250px;" v-model="all.order_id" placeholder="请输入订单ID"></el-input>
        </div>

        <div style="display: flex; background-color: #f7f8fa;align-items: center;border-radius: 10px;padding: 0 10px;margin-bottom: 10px;">
          <el-dropdown @command="handleCommand" style="margin-right: 20px;" trigger="click" class="t_down_list">
            <span class="el-dropdown-link">
              {{shijianfangshi}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a" >订单创建时间</el-dropdown-item>
              <el-dropdown-item command="b" >结算月份</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <div style="margin-right: 20px;" v-if="shijianfangshi == '订单创建时间'">
            <el-date-picker  v-model="times" @change="timeschange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']" range-separator="至"  start-placeholder="开始日期"  end-placeholder="结束日期"></el-date-picker>
          </div>

          <div style="margin-right: 20px;" v-if="shijianfangshi == '结算时间'">
            <el-date-picker  v-model="all.month"   type="month" value-format="yyyy-MM" placeholder="选择月"> </el-date-picker>
          </div>
        </div>



      </div>
      <el-button type="danger" round  @click="search()">检索</el-button>

      <el-button type="danger" round plain style="margin-right: 20px;background-color: #FFF0F5;color: #2974FF;" @click="daochu">导出当前明细</el-button>
    </div>
    <div class="t_line"></div>
    <div v-loading='loading' style="padding: 30px;">
      <div class="kflexc" >
        <div>当前数据统计：</div>
        <div style="border-radius: 5px; background: #F2F8FF; padding: 15px 25px; font-size: 14px;width: calc(100% - 165px);" class="kflexc">
          <div style="margin-right: 30px;">订单数：{{total}}</div>
          <div style="margin-right: 30px;">满足结算订单：
            <span v-if="xiaojie.order_ok_count">
              {{xiaojie.order_ok_count}}
            </span>
            <span v-else>0</span>

          </div>
          <div style="margin-right: 30px;">不满足结算订单:

            <span v-if="xiaojie.order_count - xiaojie.order_ok_count">
              {{xiaojie.order_count - xiaojie.order_ok_count}}
            </span>
            <span v-else>0</span>
          </div>
          <!--<div style="margin-right: 30px;">已结算订单:{{xiaojie.order_jiesuan_count}}</div>-->
          <div style="margin-right: 30px;">已结算金额:
            <span v-if="xiaojie.order_jiesuan_sum">
              {{xiaojie.order_jiesuan_sum}}
            </span>
            <span v-else>0</span>
          </div>
          <!-- <div style="margin-right: 30px;">不满足更改为满足结算：0</div>
          <div>勾选的金额：0.00</div> -->
        </div>
      </div>
      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable" @selection-change="handleSelectionChange">
        <template slot="empty">
            <span style="color: #969799;">当前无数据，请选择供应商后检索展示数据</span>
        </template>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align='center' prop='order_id' label="订单ID"></el-table-column>
        <el-table-column align='center' prop='parent_name' label="供应商"></el-table-column>
        <el-table-column align='center' prop='product_sku' label="商品名称"></el-table-column>
        <el-table-column align='center' prop='source_sku' label="商品编码"></el-table-column>
        <el-table-column align='center' label="生产号码">
          <template slot-scope="scope">
            <div>{{scope.row.plan_mobile_produced}}</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='status_name' label="订单状态"></el-table-column>
        <el-table-column align='center' prop='active_name' label="激活状态"></el-table-column>

        <el-table-column align='center'>
          <template v-slot:header="scope">
            <span>佣金结算状态</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                <div>待结算：未走过结算流程的订单（未导入结果）</div>
                <div>不满足结算：已走完结算流程且不满足结算的</div>
                <div>已过期：订单处于待结算状态超过3个月</div>
                <div>已结算：已经走完结算流程且满足结算的</div>
              </div>
              <i class="el-icon-question" style="color: rgba(0, 0, 0, 0.65); font-size: 18px;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            {{scope.row.pay_status_name}}
<!--            <div v-if="scope.row.status == 0">未结算</div>
            <div v-if="scope.row.status == 10">待结算</div>
            <div v-if="scope.row.status == 20">待打款</div>
            <div v-if="scope.row.status == 25">已驳回</div>
            <div v-if="scope.row.status == 30">已打款</div> -->
          </template>
        </el-table-column>

        <el-table-column align='center' prop='ok' label="满足佣金结算">
          <template slot-scope="scope">
            <div v-if="scope.row.ok === ''"></div>
            <div v-if="scope.row.ok === 0">不满足</div>
            <div v-if="scope.row.ok === 1">满足</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='reason' label="不结算原因"></el-table-column>
        <el-table-column align='center' prop='commission' label="结算佣金金额"></el-table-column>
        <el-table-column align='center' prop='reissue_commission' label="补发金额"></el-table-column>
        <el-table-column align='center' prop='change_commission' label="佣金扣罚">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.change_reason" placement="top-start">
                <div style="color: #f00;">{{scope.row.change_commission}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='change_reason' label="扣罚原因"></el-table-column>
        <el-table-column align='center' prop='remark' label="结算备注"></el-table-column>
        <el-table-column align='center' label="结算方式">
          <template slot-scope="scope">
            <div v-if="scope.row.pay_way_name != '未知'">{{scope.row.pay_way_name || ''}}</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='confirm_expend_at' label="结算时间">
          <template slot-scope="scope">
            {{scope.row.confirm_expend_at}}
            <!-- <div v-if="scope.row.status == 30">{{scope.row.withdraw_at}}</div> -->
          </template>
        </el-table-column>
        <el-table-column align='center' label="操作">
          <template slot-scope="scope">
            <div class="kflexc">

              <div style="color: #409EFF; margin: 10px; cursor: pointer;" @click="yongjin(scope.row)">佣金规则</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
    </div>
    <el-dialog title="佣金规则" center :visible.sync="log" :close-on-click-modal="false" width="600px">
      <div v-if="guize.page_id != null" >
      	<span>佣金规则：{{guize.rules}} </span>
      	<span v-if="guize.active_commission != 0">已激活，佣金{{guize.active_commission}}元.</span>
      	<span v-if="guize.first_recharge_one_commission != 0">首充大于{{guize.first_recharge_one}}元，佣金{{guize.first_recharge_one_commission}}元</span>
      	<span v-if="guize.first_recharge_two_commission != 0">或者首充大于{{guize.first_recharge_two}}元，佣金{{guize.first_recharge_two_commission}}元.</span>
      	<span v-if="guize.recharge_amount_one_commission != 0">累计充值大于{{guize.recharge_amount_one}}元，佣金{{guize.recharge_amount_one_commission}}元</span>
      	<span v-if="guize.recharge_amount_two_commission != 0">且累计充值大于{{guize.recharge_amount_two}}元，佣金{{guize.recharge_amount_two_commission}}元.</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="log = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "mingxi",
    data() {
      return {
        shijianfangshi:"结算时间",
        dangqianxuanzhong:[],
        times:[],
        loading:false,
        list:"",

        all:{
          end:"",
          parent_name:"",
          status:"",//未结算0,待结算10,已结算20,待打款30,已打款40 status
          start:"",
          page:1,
          page_size:20,
          month:"",
          jiesuan_month:"",
          is_ok:'',
          order_id:'',
          source_skus:'',
          is_settlement:""
        },
        total:0,
        log:false,

        xiaojie:"",
        guize:"",
        shoplists:[],
        gongyingshanglists:[]
      }
    },
    created() {
      // this.all.start = moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss')
      // this.all.end = moment().format('YYYY-MM-DD HH:mm:ss')
      // this.times = [this.all.start,this.all.end]


      // this.getlist()

      //获取供应商
      axios.get('/api/gth/supplier/list?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.gongyingshanglists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })


      //获取商品
      axios.get('/api/gth/order-pages2?_page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.shoplists = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

    },
    mounted() {

    },
    methods: {
      handleCommand:function(command){
        if(command == 'a'){
          this.shijianfangshi = '订单创建时间'
          this.all.month = ''
        }
        if(command == 'b'){
          this.shijianfangshi = '结算时间'
          this.times = []
          this.all.start = ''
          this.all.end = ''
        }
      },
      yongjin:function(item){

        axios.get('/api/plan-market/commission/rule?config_id='+item.config_id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.guize = response.data.data
            this.log = true
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      handleSelectionChange(val) {
        this.dangqianxuanzhong = []
        if(val.length > 0){
          val.forEach(item=>{
            this.dangqianxuanzhong.push(item.id)
          })
        }
      },
      daochu:function(){

        if(!this.all.parent_name&&!this.all.source_skus.toString()&&!this.all.is_ok&&!this.all.order_id&&!this.all.month&&!this.all.start&&!this.all.end&&!this.all.is_settlement){
          this.$message.error('请先选择搜索条件');
            return
        }

        axios.post('/api/plan-market/income/orders/exp',this.all)
        .then(response => {
          if (response.data.msg.code == 0) {
            console.log(response.data.data)
            // location.href = location.origin + '/' + response.data.data
            location.href =  response.data.data

          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      search: function() {

        if(!this.all.parent_name&&!this.all.source_skus.toString()&&!this.all.is_ok&&!this.all.order_id&&!this.all.month&&!this.all.start&&!this.all.end&&!this.all.is_settlement){
          this.$message.error('请先选择搜索条件');
            return
        }

        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {

        var obj = JSON.parse(JSON.stringify(this.all));
        obj.source_skus = this.all.source_skus.toString()

        axios.get('/api/plan-market/income/orders',{params:obj})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        axios.get('/api/plan-market/income/order/sum',{params:obj})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.xiaojie = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      timeschange(){

        if(this.times != null){
          this.all.start = this.times[0]
          this.all.end = this.times[1]
        }else{
          this.all.start = ''
          this.all.end = ''
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  .mingxi {
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
<style scoped>
/deep/ .t_down_list .el-dropdown-link{
  font-size: 12px;
  color:#666666 ;
}
.t_line{
  background-color: #F4F4F4;
  height: 10px;
}
</style>
